<template>
  <div class="bigBox">
    <!-- 头部按钮,粘性定位 -->
    <div class="sticky-header">
      <MkCard>
        <BaseBillButtonGroup @add="addBill"
          @save="saveBill"
          @gotoList="gotoList" 
        />
      </MkCard>
    </div>
    <div class="resize-container">
      <!-- 左边模块 -->
      <div class="component-left">
        <!-- 检索组件 -->
        <MkCard>
          <MkForm style="display: flex;">
              <MkInput label="标本号" @keyup.enter.native="keyupEnter" v-model="checkParam.sampleNo" clearable/>
              <MkInput label="申请单号" @keyup.enter.native="keyupEnter" v-model="checkParam.traApplyBliiNo" clearable/>
              <div style="padding-left:5%;">
                <el-button @click="keyupEnter" type="primary">查询</el-button>
              </div>
          </MkForm>
          <!-- 患者信息组件 -->
          <div style="padding: 5px 1em;font-size: 18px;">
            <MkPatient v-model="patient" />
          </div>
        </MkCard>
        <!-- 步骤条 -->
        <MkCard>
          <ElSteps :activeValue="1"/>
        </MkCard>
        <!-- 绑定列表 -->
        <MkCard>
          <MkTable :data="dataList">
            <el-table-column label="申请单号" prop="traApplyBliiNo" />
            <el-table-column label="标本号" prop="sampleNo" />
            <el-table-column label="标本状态" prop="sampleStatus" />
            <el-table-column label="绑定时间" prop="bindingTime" />
          </MkTable>
			  </MkCard>
      </div>
      <!-- 可拖动 -->
      <div class="dividebox" v-resize="['.component-left', '.component-right']" />
      <!-- 右边模块 -->
      <div class="component-right">
        <MkCard>
          <ApplicationFormToBePrinted title="待采集申请单" :data="dataList">
            <el-table-column label="申请单号" prop="traApplyBliiNo" />
            <el-table-column label="标本号" prop="sampleNo" />
            <el-table-column label="标本状态" prop="sampleStatus" />
            <el-table-column label="绑定时间" prop="bindingTime" />
          </ApplicationFormToBePrinted>
        </MkCard>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import ApplicationFormToBePrinted from './components/ApplicationFormToBePrinted.vue';
import ElSteps from './components/ElSteps.vue'
interface Param {
  traApplyBliiNo?: string;
  sampleNo?: string;
}
interface list {
  traApplyBliiNo: string;
  sampleNo: string;
  sampleStatus:number,
  bindingTime: string
}
const checkParam = ref<Param>({
  traApplyBliiNo: undefined,
  sampleNo: undefined
});
const dataList = ref<list[]>([{
  traApplyBliiNo:'2025001',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},{
  traApplyBliiNo:'2025002',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},{
  traApplyBliiNo:'2025001',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},{
  traApplyBliiNo:'2025001',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},{
  traApplyBliiNo:'2025001',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},{
  traApplyBliiNo:'2025001',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},{
  traApplyBliiNo:'2025001',
  sampleNo:'1',
  sampleStatus:1,
  bindingTime:'12025-03-15',
},])
// 新增
const addBill = () => {
  checkParam.value = {}
}
//保存
const saveBill = () => {}
//历史检索
const emits = defineEmits(['goto-list'])
const gotoList = () => {
  emits('goto-list')
}
//查询接口
const keyupEnter = () => {}
const patient = ref({
  patientCode: '2025012311',
  name: '张三',
  sex: '男',
  age: '30',
  height: 175,
  weight: 70,
  abo: 'A',
  rhD: '+',
  birthday: '1993-05-10',
  apanage: '北京',
  berth: '302',
  courtArea: 'A区',
  diseaseArea: '内科',
  department: '心内科',
  transfuseHistory: '无',
  reactionHistory: '无',
  gestationHistory: '无',
  parturitionHistory: '无',
  transplantMatchHistory: '无',
  basSingleDiseaseCode: 'D001',
  clinicDiagnose: '冠心病',
  checkBloodAbo: 'A',
  checkBloodRh: '+',
  seeDoctorType: '住院',
  visitCount: 2,
  info1: '有家族心脏病史',
  info2: '偶尔胸痛',
  info3: '',
  info4: ''
})
</script>
<style lang="scss" scoped>
.bigBox{
  background-color: rgb(242, 243, 245);

  .sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .resize-container {
    display: flex;
    width: 100%;

    .component-left {
      flex: 1;
    }

    .component-right {
      width: 40%;
    }

    .dividebox {
      height: calc(100vh - 100px);
      opacity: 0.5;
      position: relative;
    }
    .dividebox::before {
      content: "::";
      font-family: iconfont;
      font-size: 13px;
      color: rgb(0, 0, 0);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Center the content */
    }
  }
}
</style>
